<template>
  <el-menu :collapse="isCollapse" class="el-menu-vertical-demo" background-color="#304156" router text-color="#fff"
    active-text-color="#409eff" :default-active="navState">
    <div style="display: flex; align-items: center; justify-content: center; padding: 20px 20px;">
      <i class="iconfont icon-quan" style="font-size: 30px;"></i>
      <span v-show="!isCollapse">外卖馆</span>
    </div>
    <el-submenu :index="route.path+''" v-for="route in routes" :key="route.path">
      <template slot="title">
        <i :class="route.meta.icon"></i>
        <span>{{ route.meta.title }}</span>
      </template>
      <el-menu-item :index="route.path+'/'+m.path+''" v-for="m in route.children" :key="m.path"
        @click="saveNavState(route.path+'/'+m.path+'')">
        <template slot="title">
          <i :class="m.meta.icon"></i>
          <span>{{ m.meta.title }}</span>
        </template>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
  export default {
    name: 'Menu',
    data() {
      return {
        navState: '',
      }
    },
    props: ['isCollapse'],
    computed: {
      routes() {
        const routes = this.$router.options.routes
        const menu = (routes) => {
          return routes.filter(item => {
            if (item.meta && item.meta.menu) {
              return true
            }
          }).map(item => {
            if (item.children) {
              item.children = menu(item.children)
            }
            return item
          })
        }
        return menu(routes)
      }
    },
    created() {
      this.navState = sessionStorage.getItem('navState')
    },
    methods: {
      saveNavState(navState) {
        sessionStorage.setItem('navState', navState)
        this.navState = navState
      }
    }
  }
</script>

<style scoped>
  span {
    margin-left: 5px;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
  }
</style>
